<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页收藏夹</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入自己的index.css -->
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <link href="./css/bootstrap5.3.min.css" rel="stylesheet">
    <style>
        .mymess{
            left: 100px;
            top: 50px;
            position: fixed;
            border: 1px solid #e9c5c5;
            border-radius: 5px;
            text-align: center;
            padding: 10px;
            width: 350px;
            font-size: large;
            color: aliceblue;
            background-color: #000000;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container"  id="star_list">
        <!--        header 头部导航栏-->
        <div id="my_header">      </div>
        <div class="">{{mess}}</div>
        <div class="" >
            <button v-on:click="addFather()">✚✚</button>
            <button v-on:click="changeSonFather()">↹目录</button>
            <span> |-----| </span>
            <a href="index_tmp_files.html">文件临时存取</a>
            <a href="webchart/index.html">语音聊天室</a>
            <a href="explorer/fileExplorer.html">文件浏览器</a>
        </div>
        <ol v-for="father in father_list" class="father">
            <h4 class="father_head">
                <label>
                    <input type="radio" name="select_father" :value="father.id" />
                    {{ father.name }} 
                </label>
                    <span style="width: 15px; display: inline-block;"></span>
                <button v-on:click="addSon(father.id)">✚</button>    
                <button v-on:click="changeFather(father.id)">✍</button>    
                <button v-on:click="deleteFather(father.id)">✖</button>
            </h4>
            <ul v-for="son in father.sons" class="son">
                <input type="checkbox" name="ckbson" :value="son.id" />
                <input class="" v-model="son.name" />
                <input style="width: 100px;" class="" v-model="son.url" />
                <button v-on:click="openUrl(son.url)">↗</button>
                <button  v-on:click="changeSon(father.id, son.id)">✍</button>
                <button  v-on:click="deleteSon(son.id)">✘</button>
            </ul>
        </ol>

    </div>
</body>

<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        $("#my_header").load("index_header.html");
    });
</script>

<script src="./js/star_index.js">
    
</script>

</html>